/*
  学习目标：useEffect挂载-卸载综合写法
  💥 useEffect以功能为单位， 一个useEffect一般只处理一个功能
*/
import React, { useEffect, useState } from 'react';

export default function App() {
  const [isShow, setIsShow] = useState(true);

  return (
    <div>
      <button onClick={() => setIsShow(!isShow)}>点我卸载</button>
      {isShow && <Child></Child>}
    </div>
  );
}

function Child() {
  const resizeFn = () => {
    console.log('窗口改变了');
  };

  // 1. 处理窗口的逻辑
  useEffect(() => {
    window.addEventListener('resize', resizeFn);
    return () => {
      window.removeEventListener('resize', resizeFn);
    };
  }, []);

  // 2. 处理定时器的逻辑
  useEffect(() => {
    const timerId = setInterval(() => {
      console.log('123  ----->  ');
    }, 100);
    return () => {
      clearInterval(timerId);
    };
  }, []);

  return <h1>我是Child</h1>;
}
